<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
// Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏) 这个怎么实现
// 在 Vue 项目中实现动态路由，通常是指从后台获取路由配置，然后在前端动态生成路由和侧边栏。以下是一个基本的实现步骤：

// 1. 从后台获取路由配置
// 首先，你需要从后台获取路由配置。可以使用 axios 或其他 HTTP 库来实现这一点。

import axios from 'axios';

// 获取路由配置
export function getRoutes() {
  return axios.get('/api/routes').then(response => response.data);
}

// 2. 动态生成路由
// 在 Vue 项目中，通常会在 src/router/index.js 文件中配置路由。你可以在这里动态添加从后台获取的路由。


import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import { getRoutes } from '@/api/routes';

Vue.use(Router);

const createRouter = async () => {
  const routes = await getRoutes();

  // 将后台获取的路由转换为 Vue Router 需要的格式
  const formattedRoutes = routes.map(route => {
    return {
      path: route.path,
      name: route.name,
      component: () => import(`@/components/${route.component}.vue`)
    };
  });

  // 添加一些基本路由
  const baseRoutes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ];

  return new Router({
    mode: 'history',
    routes: [...baseRoutes, ...formattedRoutes]
  });
};

export default createRouter;

// 3. 初始化路由
// 在 src/main.js 中初始化路由时，使用 createRouter 函数来动态生成路由。

import Vue from 'vue';
import App from './App.vue';
import createRouter from './router';

Vue.config.productionTip = false;

(async () => {
  const router = await createRouter();

  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app');
})();

// 4. 生成侧边栏
// 在 Vue 组件中，可以根据路由配置动态生成侧边栏。例如，在 src/components/Sidebar.vue 中：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="route in routes" :key="route.name">
        <router-link :to="route.path">{{ route.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routes: []
    };
  },
  created() {
    // 从后台获取路由配置
    this.fetchRoutes();
  },
  methods: {
    fetchRoutes() {
      this.$router.options.routes.forEach(route => {
        if (route.name !== 'Home') {
          this.routes.push(route);
        }
      });
    }
  }
};
</script>

<style scoped>
.sidebar {
  width: 200px;
  background-color: #f4f4f4;
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #42b983;
}
</style>

// 5. 使用侧边栏
// 在 src/App.vue 中使用侧边栏组件：

<template>
  <div id="app">
    <Sidebar />
    <router-view />
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue';

export default {
  components: {
    Sidebar
  }
};
</script>

<style>
#app {
  display: flex;
}
</style>

</script>